!<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="logList"
      :pagination="pagenation"
      :locale="{emptyText:'暂无日志数据'}"
      :loading="tableLoading"
      @change="changePage"
    >
      <template #headerCell="{ column }">
        <template v-if="column.key === 'log_id'">
          <span>日志ID</span>
        </template>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'userId'">
          <span>{{ record.userId }}</span>
        </template>
        <template v-else-if="column.key === 'nowUserName'">
          <div>
            <span style="color:#8c8c8c">{{ record.nowUserName }}</span>
          </div>
        </template>
        <template v-else-if="column.key === 'log_ip'">
          <div>{{record.log_ip}}</div>
        </template>
        <template v-else-if="column.key === 'log_env'">
          <div>{{record.log_env}}</div>
        </template>
        <template v-else-if="column.key === 'log_time'">
          <div>{{record.log_time}}</div>
        </template>
        <template v-else-if="column.key === 'action'">
          <div class="account-actions">
            <a-popconfirm
              title="是否删除这条日志?"
              ok-text="是"
              okType="danger"
              cancel-text="取消"
              @confirm="delLog(record.log_id)"
            >
              <template #icon>
                <question-circle-outlined style="color: red" />
              </template>
              <a-button type="danger" shape="circle">
                <template #icon>
                  <delete-outlined />
                </template>
              </a-button>
            </a-popconfirm>
          </div>
        </template>
      </template>
    </a-table>
  </div>
  <div></div>
</template>

<script>
import { ref } from "vue";
import { message } from "ant-design-vue";
import { selectList, deleteLog } from "@/api/log";
let pagenation = {
  pageSize: 5,
  total: 0
};
const columns = [
  {
    name: "log_id",
    dataIndex: "log_id",
    width: 120,
    key: "log_id"
  },
  {
    title: "用户名",
    dataIndex: "userId",
    width: 120,
    sorter: {
    compare: (a, b) => a.userId - b.userId,
    multiple: 2,
  },
    key: "userId"
  },
  {
    title: "用户名",
    dataIndex: "nowUserName",
    width: 120,
    key: "nowUserName"
  },
  {
    title: "登录时间",
    width: 180,
    defaultSortOrder: 'descend',
    dataIndex: "log_time",
    key: "log_time"
  },
  {
    title: "登录环境",
    width: 280,
    key: "log_env",
    dataIndex: "log_env"
  },
  {
    title: "登录IP",
    width: 120,
    key: "log_ip",
    dataIndex: "log_ip"
  },
  {
    title: "",
    key: "action"
  }
];
export default {
  name: "account",
  components: {},
  setup() {
    return {
      columns,
      pagenation,
      editVisible: ref(false),
      addVisible: ref(false),
      tableLoading: ref(true),
    };
  },

  data() {
    return {
      edit: null,
      logList: []
    };
  },

  mounted() {
    this.tableLoading = true;
    this.getList(1, 6);
  },

  methods: {
    delLog(id) {
      const res = deleteLog({
        log_id: id
      });
      let that = this;
      res
        .then(response => {
          //这里是请求成功后的操作
          console.log(response);
          if (response.code === 100) {
            message.success(response.msg);
            that.getList(1, 6);
          } else {
            message.warning(response.msg);
          }
          that.tableLoading = false;
        })
        .catch(error => {
          that.tableLoading = false;
          message.error(error.message);
          console.log(error);
        });
    },
    async getList(p = 1, s = 6) {
      const res = selectList({
        pageNum: p,
        pageSize: s
      });

      let that = this;
      res
        .then(response => {
          //这里是请求成功后的操作
          console.log(response);
          if (response.code === 100) {
            that.logList = [];
            let i = 0;
            for (const key in response.data.list) {
              if (response.data.list.hasOwnProperty(key)) {
                const element = response.data.list[key];
                element.key = i;
                i += 1;
                that.logList.push(element);
                that.pagenation.total = response.data.total;
              }
            }
          }
          that.tableLoading = false;
        })
        .catch(error => {
          that.tableLoading = false;
          message.error(error.message);
          console.log(error);
        });
    },
    changePage(pagination) {}
  }
};
</script>

<style scoped>
.edit-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.edit-item-title {
  user-select: none;
  width: 110px;
  font-size: 16px;
}
.edit-item-content {
  margin-left: 1rem;
  color: rgb(126, 126, 126);
}
.edit-item {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.account-actions {
  display: flex;
  gap: 1rem;
}
</style>